<script setup lang="ts">
import {
  Coin,
  DocumentAdd,
  DocumentChecked,
  Download,
  Menu,
  Search,
  Tickets
} from '@element-plus/icons-vue'
// import cardItemBox from './components/cardItem.vue'
import collfootBox from './components/collfootItem.vue'
import noticeItem from './components/noticeItem.vue'
// //我的收藏
import { getUserCollectionListUrl } from '@/api/collection'
import { ref, onMounted } from 'vue'
import { getDataApi } from '@/api/home'
import { ElMessage, ElNotification } from 'element-plus'
import * as echarts from 'echarts'
import mapJson from '@/assets/wulumuqi.json'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores'

const store = useUserStore() // 用户信息
// 路由权限一级菜单
const userNavList = ref<any>([])
store.userNav.forEach((item: any) => {
  userNavList.value.push(item.path)
})
const router = useRouter()
const gotoPath = (path: string, permission?: boolean) => {
  if (permission) {
    console.log(!userNavList.value.includes(`/${path.split('/')[1]}`))

    if (!userNavList.value.includes(`/${path.split('/')[1]}`)) {
      return ElMessage({ message: '暂无权限！如果需要请联系管理员添加！', type: 'warning' })
    } else {
      router.push({
        path: `${path}`
      })
    }
  } else {
    router.push({
      path: `${path}`
    })
  }
}
// 新疆地图
const mapEcharts = ref<any>()
const mapEchartsRef = ref<HTMLElement>()
const initMapEcharts = () => {
  mapEcharts.value = echarts.init(mapEchartsRef.value as HTMLElement)
  // @ts-ignore：无法被执行的代码的错误
  echarts.registerMap('xinjiang', mapJson)
  const option = {
    title: {
      text: '新疆全域',
      top: 20
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}<br/>{c}'
    },
    roam: true,
    toolbox: {
      show: true,
      orient: 'vertical',
      left: 'right',
      top: 20,
      feature: {
        restore: {
          title: '还原'
        }
      }
    },
    visualMap: {
      min: 0,
      max: 50000,
      text: ['High', 'Low'],
      realtime: false,
      calculable: true,
      inRange: {
        color: ['lightskyblue', 'yellow', 'orangered']
      }
    },
    series: [
      {
        name: '新疆数据',
        type: 'map',
        map: 'xinjiang',
        emphasis: {
          label: {
            show: true
          }
        },
        data: [
          { name: '乌鲁木齐市', value: 50000 },
          { name: '吐鲁番市', value: 15477.48 },
          { name: '克拉玛依市', value: 31686.1 },
          { name: '哈密市', value: 6992.6 },
          { name: '昌吉回族自治州', value: 44045.49 },
          { name: '博尔塔拉蒙古自治州', value: 40689.64 },
          { name: '巴音郭楞蒙古自治州', value: 37659.78 },
          { name: '阿克苏地区', value: 180.97 },
          { name: '克孜勒苏柯尔克孜自治州', value: 9500.85 },
          { name: '喀什地区', value: 3198.23 },
          { name: '和田地区', value: 2665.45 },
          { name: '伊犁哈萨克自治州', value: 6840.5 },
          { name: '塔城地区', value: 3178.05 },
          { name: '阿勒泰地区', value: 4385.68 },
          { name: '胡杨河市', value: 323.55 },
          { name: '图木舒克市', value: 323.55 },
          { name: '五家渠市', value: 323.55 },
          { name: '昆玉市', value: 323.55 },
          { name: '石河子市', value: 323.55 },
          { name: '阿拉尔市', value: 323.55 },
          { name: '北屯市', value: 323.55 },
          { name: '铁门关市', value: 323.55 },
          { name: '双河市', value: 323.55 },
          { name: '可克达拉市', value: 323.55 }
        ]
      }
    ]
  }
  mapEcharts.value.setOption(option)
}

// 饼状图
const pieEcharts = ref<any>()
const pieEchartsRef = ref<HTMLElement>()
const initPieEcharts = () => {
  pieEcharts.value = echarts.init(pieEchartsRef.value as HTMLElement)
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: '宽带履约率' },
          { value: 735, name: '宽带修障及时率' },
          { value: 580, name: '宽带重复障碍率' },
          { value: 484, name: '固网业务装移机智能派单率' },
          { value: 300, name: '障碍率' }
        ]
      }
    ]
  }
  pieEcharts.value.setOption(option)
}

// 我的足迹 / 我的收藏 切换
// const content = '暂无数据'
const collectColor = ref('#fff')
const footprintColor = ref('#0b7be2')
const hrTabsClick = (val: any) => {
  if (val === '1') {
    collectColor.value = '#eb6957'
    footprintColor.value = '#fff'
  } else {
    collectColor.value = '#fff'
    footprintColor.value = '#0b7be2'
  }
  // console.log(val)
}

const collectionData = ref<any>([])
// 获取收藏
const getCollectionData = () => {
  let params = {
    sqlId: 'userCollectionAndTrail.getUserCollectionList',
    sqlParam: JSON.stringify({}),
    pagination: true,
    dbName: 'report',
    debug: 0,
    page: 1,
    rows: 9
  }
  getUserCollectionListUrl(params).then((res: any) => {
    collectionData.value = res.rows
  })
}

// 获取公告
const filterData = (data: any) => {
  // 筛选未结束公告的第一条
  const currentDate = new Date()
  const filteredData = data.filter((item: any) => {
    const endDate = new Date(item.end_date)
    return endDate >= currentDate && item.push_flag === '1'
  })
  return filteredData[0] || null
}
const noticeList = ref<any>([])
const getNoticeList = async () => {
  const params = {
    sqlId: 'noticeMgr.getAllNotice'
  }
  await getDataApi(params)
    .then((res: any) => {
      noticeList.value = res.slice(0, 6)
      const result = filterData(noticeList.value)
      if (result) {
        ElNotification({
          title: '系统公告',
          dangerouslyUseHTMLString: true,
          duration: 3000,
          type: 'info',
          position: 'bottom-right',
          message: `<h2 style="font-size: 18px; color: #000;">${result.notice_name}</h2><p style="font-size: 12px;">${result.notice_content}</p>`
        })
      }
    })
    .catch(() => {
      ElMessage({ message: '公告获取失败', type: 'error' })
    })
}

onMounted(() => {
  // console.log(store.userNav)

  getNoticeList()
  getCollectionData()
  initMapEcharts()
  initPieEcharts()
})
</script>

<template>
  <div class="homePage">
    <div class="hp_left">
      <div class="matrixBox">
        <div class="matrixBox_left">
          <div class="ml_item" @click="gotoPath('/search')" style="background-color: #f2b312">
            <div class="ml_item_icon">
              <el-icon>
                <Search />
              </el-icon>
            </div>
            <p>门户报表检索</p>
          </div>
          <div
            class="ml_item"
            @click="gotoPath('/YunWangAnQuan/BianGengCaoZuo/GeRenJiFen/GeRenJiFen', true)"
            style="background-color: #8456e8"
          >
            <div class="ml_item_icon">
              <el-icon><Coin /></el-icon>
            </div>
            <p>云网安全 个人积分</p>
          </div>
          <div
            class="ml_item"
            @click="
              gotoPath(
                '/ZhuangWeiYeWu/ChanNengShuJu/ChanNengFenXi/ChanNengFenXiRiTongBaoBiao',
                true
              )
            "
          >
            <div class="ml_item_icon">
              <el-icon><Tickets /></el-icon>
            </div>
            <p>产能分析日通报表</p>
          </div>
        </div>
        <div class="matrixBox_center">
          <el-carousel :interval="3000" class="carouselBox" trigger="click">
            <el-carousel-item
              class="carouselItem"
              @click="
                gotoPath(
                  '/ZhuangWeiYeWu/ChanNengShuJu/ChanNengFenXi/ChanNengFenXiRiTongBaoBiao',
                  true
                )
              "
            >
            </el-carousel-item>
            <el-carousel-item
              class="carouselItem"
              @click="
                gotoPath(
                  '/ZhuangWeiYeWu/ZhuangWeiGongZuoLiangHeSuan/GongChengShiHuaXiang/ZhuangWeiRenYuanHuaXiang',
                  true
                )
              "
            >
            </el-carousel-item>
            <el-carousel-item class="carouselItem">
              <ul class="carouselItem_ul">
                <li>
                  <p>98%</p>
                  <h4>宽带履约率</h4>
                </li>
                <li>
                  <p>97%</p>
                  <h4>宽带修障及时率</h4>
                </li>
                <li>
                  <p>2.3%</p>
                  <h4>宽带重复障碍率</h4>
                </li>
                <li>
                  <p>100%</p>
                  <h4>固网业务装移机智能派单率</h4>
                </li>
                <li>
                  <p>3.6%</p>
                  <h4>障碍率</h4>
                </li>
              </ul>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="matrixBox_right">
          <div class="ml_item" @click="gotoPath('/myTerritory', true)">
            <div class="ml_item_icon">
              <el-icon>
                <Menu />
              </el-icon>
            </div>
            <p>我的地盘</p>
          </div>
          <div class="ml_item second">
            <div
              class="l_con"
              @click="gotoPath('/ZiYuanGongJu/ShuJuLuRu/WeiBiaoLuRuWeiHu/WeiBiaoLuRuWeiHus', true)"
              style="background-color: #f2b312"
            >
              <div class="ml_item_icon">
                <el-icon><DocumentChecked /></el-icon>
              </div>
              <p>维表录入维护</p>
            </div>
            <div
              class="r_con"
              @click="gotoPath('/ZiYuanGongJu/ShuJuLuRu/WeiBiaoShuJuLuRu/WeiBiaoShuJuLuRus', true)"
              style="background-color: #30b12d"
            >
              <div class="ml_item_icon">
                <el-icon><DocumentAdd /></el-icon>
              </div>
              <p>维表数据录入</p>
            </div>
          </div>
          <div
            class="ml_item"
            @click="gotoPath('/ZiYuanGongJu/WoDeXiaZai/WoDeXiaZai/WoDeXiaZai', true)"
            style="background-color: #8456e8"
          >
            <div class="ml_item_icon">
              <el-icon><Download /></el-icon>
            </div>
            <p>我的下载</p>
          </div>
        </div>
      </div>
      <div class="graphicalBox">
        <div class="mapBox" ref="mapEchartsRef"></div>
        <div class="cakeBox" ref="pieEchartsRef"></div>
      </div>
    </div>
    <div class="hp_right">
      <el-tabs type="border-card" class="hrTabs" @tab-change="hrTabsClick">
        <el-tab-pane>
          <template #label>
            <span class="custom-tabs-label">
              <svg-icon :color="collectColor" className="iconBox" iconName="icon-shoucang">
              </svg-icon>
              <span>我的收藏</span>
            </span>
          </template>
          <div v-if="collectionData.length === 0" class="hrTabsContent">
            <el-empty class="emptyBox" description="暂无数据" />
          </div>
          <div v-else class="hrTabsContent">
            <el-scrollbar>
              <collfootBox v-for="item in collectionData" :key="item.id" :item="item"></collfootBox>
            </el-scrollbar>
          </div>
        </el-tab-pane>
        <el-tab-pane label="Config">
          <template #label>
            <span class="custom-tabs-label">
              <svg-icon :color="footprintColor" className="iconBox" iconName="icon-zuji">
              </svg-icon>
              <span>我的足迹</span>
            </span>
          </template>
          <div v-if="true" class="hrTabsContent">
            <el-empty class="emptyBox" description="暂未开放" />
          </div>
          <div v-else class="hrTabsContent">
            <collfootBox iconName="icon-zuji" iconColor="#0b7be2"></collfootBox>
            <collfootBox iconName="icon-zuji" iconColor="#0b7be2"></collfootBox>
            <collfootBox iconName="icon-zuji" iconColor="#0b7be2"></collfootBox>
            <collfootBox iconName="icon-zuji" iconColor="#0b7be2"></collfootBox>
            <collfootBox iconName="icon-zuji" iconColor="#0b7be2"></collfootBox>
            <collfootBox iconName="icon-zuji" iconColor="#0b7be2"></collfootBox>
            <collfootBox iconName="icon-zuji" iconColor="#0b7be2"></collfootBox>
          </div>
        </el-tab-pane>
      </el-tabs>

      <el-card class="hrCardBox">
        <template #header>
          <div class="cardHeader">
            <svg-icon color="#fff" className="iconBox" iconName="icon-tickets-fill"></svg-icon>
            <span style="color: #fff">系统公告</span>
          </div>
        </template>
        <div class="cardCon">
          <noticeItem
            v-for="nitem in noticeList"
            :key="nitem.notice_id"
            :item-info="nitem"
          ></noticeItem>
        </div>
      </el-card>

      <el-card class="hrCardBox">
        <template #header>
          <div class="cardHeader">
            <svg-icon color="#fff" className="iconBox" iconName="icon-tickets-fill"></svg-icon>
            <span style="color: #fff">热点应用</span>
          </div>
        </template>
        <div class="cardConS">
          <span class="appItem"> 数据应用门户 </span>
          <span class="appItem"> 数据治理平台 </span>
          <span class="appItem"> 标签系统 </span>
          <span class="appItem"> 系统名称 </span>
          <span class="appItem"> 标签系统 </span>
          <span class="appItem"> 系统名称 </span>
        </div>
      </el-card>
    </div>
    <!-- 原左侧 -->
    <!-- <div>
      <el-card>
        <template #header>
          <div class="card-header">
            <span>热门推荐</span>
          </div>
        </template>
        <div class="cardItem">
          <cardItemBox title="应用名称" :content="content" icon="icon-position"></cardItemBox>
          <cardItemBox title="应用名称" :content="content" icon="icon-position"></cardItemBox>
          <cardItemBox title="应用名称" :content="content" icon="icon-position"></cardItemBox>
          <cardItemBox title="应用名称" :content="content" icon="icon-position"></cardItemBox>
          <cardItemBox title="应用名称" :content="content" icon="icon-position"></cardItemBox>
          <cardItemBox title="应用名称" :content="content" icon="icon-position"></cardItemBox>
        </div>
      </el-card>
      <el-card>
        <template #header>
          <div class="card-header">
            <span>猜你喜欢</span>
          </div>
        </template>
        <div class="cardItem">
          <cardItemBox title="应用名称" :content="content" icon="icon-position"></cardItemBox>
          <cardItemBox title="应用名称" :content="content" icon="icon-position"></cardItemBox>
          <cardItemBox title="应用名称" :content="content" icon="icon-position"></cardItemBox>
          <cardItemBox title="应用名称" :content="content" icon="icon-position"></cardItemBox>
          <cardItemBox title="应用名称" :content="content" icon="icon-position"></cardItemBox>
          <cardItemBox title="应用名称" :content="content" icon="icon-position"></cardItemBox>
        </div>
      </el-card>
      <el-card>
        <template #header>
          <div class="card-header">
            <span>最新上线</span>
          </div>
        </template>
        <div class="cardItem2">
          <el-button type="info" plain>此部分展示新上线的报表</el-button>
          <el-button type="info" plain>日常维修费用核算</el-button>
          <el-button type="info" plain>三盯页面费用核算</el-button>
          <el-button type="info" plain>三盯页面费用核算</el-button>
        </div>
      </el-card>
    </div> -->
  </div>
</template>

<style scoped lang="less">
.homePage {
  padding: 0.5rem;
  display: grid;
  grid-template-columns: 1fr 22.5rem;
  column-gap: 0.625rem;
  grid-template-rows: calc(100vh - 110px);
  grid-template-areas: 'hp_left hp_right';

  :deep(.hp_left) {
    grid-area: hp_left;

    .matrixBox {
      display: grid;
      grid-template-columns: 0.8fr 1fr 0.8fr;
      column-gap: 0.625rem;
      grid-template-areas: 'matrixBox_left matrixBox_center matrixBox_right';

      .ml_item.second {
        background-color: transparent;
        .l_con,
        .r_con {
          height: 6.125rem;
          line-height: 6.125rem;
        }
      }

      .ml_item {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 6.125rem;
        line-height: 6.125rem;
        margin-bottom: 3px;
        text-align: center;
        background-color: var(--cnac-text2);

        .l_con {
          margin-right: 2%;
        }

        .l_con,
        .r_con {
          width: 49%;
          text-align: center;
          background-color: var(--cnac-text2);

          .ml_item_icon {
            width: auto;
            text-align: center;
            height: 3.5rem;
            line-height: 3.5rem;

            .el-icon {
              margin-right: 0;
            }
          }

          p {
            text-align: center;
            height: 1.875rem;
            line-height: 1.875rem;
            color: #fff;
          }
        }

        .ml_item_icon {
          width: 42%;
          text-align: right;

          .el-icon {
            margin-right: 0.75rem;
            vertical-align: middle;
            font-size: 1.875rem;
            color: #fff;
          }
        }

        p {
          color: #fff;
          flex: 1;
          text-align: left;
        }
      }

      .ml_item:last-child {
        margin-bottom: 0;
      }

      .matrixBox_left {
        grid-area: matrixBox_left;
      }

      .matrixBox_center {
        grid-area: matrixBox_center;
        .carouselBox {
          height: 18.8rem;
          .el-carousel__container {
            height: 18.8rem;
            .el-carousel__item:nth-child(1) {
              background: url(../../assets/images/banner2.png) no-repeat center center;
              background-size: 100% 100%;
            }
            .el-carousel__item:nth-child(2) {
              background: url(../../assets/images/banner3.png) no-repeat center center;
              background-size: 100% 100%;
            }
            .el-carousel__item:nth-child(3) {
              position: relative;
              background: url(../../assets/images/banner1.png) no-repeat center center;
              background-size: 100% 100%;
              .carouselItem_ul {
                padding: 8px;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                text-align: center;
                li {
                  cursor: auto;
                  color: #fff;
                  list-style: none;
                }
                // column-gap: 0.625rem;
              }
            }
          }
        }
        // background: url(@/assets/images/home_bg.png) no-repeat center center;
        // background-size: 100% 100%;
      }

      .matrixBox_right {
        grid-area: matrixBox_right;
      }

      width: 100%;
      height: 18.375rem;
    }

    .graphicalBox {
      margin-top: 2rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 0.625rem;
      height: auto;
      .mapBox,
      .cakeBox {
        // mapEchartsRef pieEchartsRef
        height: 35rem;
        border: 1px solid var(--cnac-bgc1);
      }
    }

    .el-card {
      box-shadow: unset;
      border: unset;

      .el-card__header {
        border-bottom: 0;

        .card-header {
          span {
            font-weight: 700;
          }
        }
      }

      .el-card__body {
        .cardItem {
          display: grid;
          grid-template-columns: repeat(6, 1fr);
          column-gap: 0.625rem;
          row-gap: 0.625rem;
          width: 100%;
          height: 7.5rem;
        }

        .cardItem2 {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          column-gap: 0.625rem;
          row-gap: 0.625rem;
          width: 100%;
          height: 6.875rem;

          .el-button {
            margin-left: 0;
            height: 3.125rem;
            justify-content: start;
          }
        }

        padding: 0 0.5rem;
        padding-right: 0;
      }
    }
  }

  :deep(.hp_right) {
    grid-area: hp_right;

    .el-tabs__nav-scroll {
      height: 3.125rem;
      background-color: #fff;
    }
    .hrTabs {
      .el-tabs__content {
        height: 15.575rem;
      }
    }
    .el-tabs__nav {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      width: 100%;
      height: 3.125rem;

      .el-tabs__item {
        height: 3.125rem;
        line-height: 3.125rem;
        border-bottom: 1px solid #dcdfe6;

        .iconBox {
          font-size: 1.25rem;
          vertical-align: sub;
          margin-right: 8px;
        }

        span {
          color: var(--cnac-text1);
        }
      }

      .is-active {
        background-color: var(--cnac-main);
        color: #fff;

        span {
          color: #fff;
        }
      }

      .el-tabs__item.is-active:hover {
        background-color: var(--cnac-main);
        color: #fff;
      }

      .el-tabs__item:hover {
        background-color: #eff4f8;
      }
    }

    .hrTabsContent {
      height: 14.575rem;
      .emptyBox {
        max-height: 13.5rem;
      }
    }

    .hrCardBox {
      margin-top: 1.625rem;
      border-radius: unset;
      box-shadow: none;

      .el-card__header {
        padding: 0;
        background-color: var(--cnac-main);
      }

      .cardHeader {
        padding: 0.625rem 0.5rem;

        .iconBox {
          font-size: 1.875rem;
          vertical-align: top;
        }

        span {
          font-size: 1rem;
          display: inline-block;
          // font-weight: 700;
          margin-left: 0.5rem;
        }
      }

      .el-card__body {
        padding: 0;
      }

      .cardCon {
        padding: 0.625rem 0.5rem;
        min-height: 16.8rem;
      }

      .cardConS {
        padding: 0.625rem 0.5rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 0.625rem;
        row-gap: 0.625rem;
        width: 100%;
        height: auto;
        .appItem {
          display: inline-block;
          text-decoration: underline;
          height: 1.25rem;
          margin: 0.625rem;
        }
      }
    }
  }
}
</style>
